<template>
    <QilinView v-model:viewConfig="viewConfig">
        <template v-slot:custom="slotData">
            <span>{{slotData.data.data}}内容随便写哦！</span>
        </template>
    </QilinView>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const viewConfig=reactive({
    globalConfig:{
        isTable:true,
        borderColor:"red",
        labelBackgroundColor:"#FAFAFA",
        labelColor:"rgba(0,0,0,0.85)",
        valueColor:"rgba(0,0,0,0.65)"
    },
    headerConfig:{
        hideHeader:false,
        headerText:""
    },
    itemConfig:[
        {
            label:"姓名",
            value:"name",
            type:"text",
            col:8
        },
        {
            label:"简介",
            value:"description",
            type:"text",
            valueEllipsis:true,
            col:16
        },
        {
            label:"Qilin官网作者Qilin组件作者生平",
            value:"detail",
            type:"text",
            labelEllipsis:true,
            col:24
        },
        {
            label:"生辰",
            value:"birthday",
            type:"date",
            format:"chinese",
            col:12
        },
        {
            label:"Qilin官网",
            value:"qilinWeb",
            type:"link",
            valueStyle:"color:red !important;",
            click:(item,value)=>{
                console.log(item,value);
                window.open(value);
            },
            col:12
        },
        {
            label:"最喜欢颜色",
            value:"color",
            type:"color",
            col:24
        },
        {
            label:"换行文本",
            value:"lineText",
            type:"text",
            newLine:true,
            col:24,
        },
        {
            label:"富文本",
            value:"car",
            type:"richtext",
            col:24
        },
        {
            label:"作者图片1",
            value:"imageArrayString",
            type:"image",
            isImageArrayString:true,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片2",
            value:"imageArrayObj",
            type:"image",
            isImageArrayString:false,
            imageIp:"https://szxy.jsisi.cn/qilin",
            // imageIp:"http://szxy.jsisi.cn",
            imageOptions:{
                serverUrl:"fileName"
            },
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片3",
            value:"imageArrayObj2",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            imageOptions:{
                serverUrl:"name"
            },
            col:24
        },
        {
            label:"作者文档1",
            value:"fileArrayString",
            type:"file",
            isImageArrayString:true,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档2",
            value:"fileArrayObj",
            type:"file",
            isImageArrayString:false,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档3",
            value:"fileArrayObj2",
            type:"file",
            isImageArrayString:false,
            imageOptions:{
                serverOriginalName:"name"
            },
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"插槽",
            value:"custom",
            type:"slot",
            slotName:"custom",
            col:24
        },
        {
            label:"作者介绍",
            value:"detail",
            type:"text",
            textarea:true,
            rows:3,
            col:24
        }
    ],
    viewData:{
        name:"Qilin",
        description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        birthday:"1996-05-12",
        qilinWeb:"https://www.qilin-web.cn",
        color:"yellow",
        lineText:"请完成三化二级平台24年商务工作。建议步骤如下。报账进入流程可完成任务。\n（1）11月份，完成全部费…分与计算，完成工作量评审。\n（3）11月或12月，完成订单验收 \n（4）12月，完成整体付款工作。",
        car:"<b>永恒转动的机械，助我突破自身的限制，我......长安univ，即是黑暗，也是天选，转子发动机，启动！永恒转动的机械，助我突破自身的限制，我......长安univ，即是黑暗，也是天选，转子发动机，启动！</b>",
        imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
        imageArrayObj:[
            {
                fileName:"/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg",
                url:"http://szxy.jsisi.cn/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg"
            },
            {
                fileName:"/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg",
                url:"http://szxy.jsisi.cn/profile/upload/2025/05/28/watermarked_20250528160812A001.jpg"
            }
        ],
        imageArrayObj2:[
            {
                name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
        fileArrayObj:[
            {
                originalFilename:"dhadadjasdjafjak.doc"
            }
        ],
        fileArrayObj2:[
            {
                name:"dhadadjasdjafjak.doc"
            }
        ],
        custom:"作者的自定义插槽~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
